Responsive fallback#1529
Conversation
🦋 Changeset detectedLatest commit: 1580ae3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
✔️ Deploy Preview for cloudfour-patterns ready! 🔨 Explore the source changes: 1580ae3 🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/613a7ba976842700074d4769 😎 Browse the preview: https://deploy-preview-1529--cloudfour-patterns.netlify.app |
tylersticka
left a comment
tylersticka
left a comment
There was a problem hiding this comment.
Very cool!
Deferring approval to @cloudfour/dev in case there's anything that needs to change in order to use this with our service worker. (FYI @calebeby)
Paul-Hebert
left a comment
Paul-Hebert
left a comment
There was a problem hiding this comment.
This is looking great Arianna! 🎉
I made a couple super nitpicky suggestions but this all looks good to me.
I don't see anything that I think would need to change for us to use this with our service worker. 🤔 We're including the assets directory in the output of our npm package so it seems like we should be able to grab that from Wordpress:
cloudfour.com-patterns/package.json
Lines 32 to 41 in 6c444f9
Co-authored-by: Paul Hebert <paul@cloudfour.com>
Co-authored-by: Paul Hebert <paul@cloudfour.com>
| <Story name="Responsive fallback image" height="200px"> | ||
| {() => | ||
| responsiveImageDeck({ | ||
| ratios: ['1 / 1', '16 / 9', '9 / 16'], |
There was a problem hiding this comment.
Quick question, @AriannaChau! 🙂
In Safari, the aspect ratios all look the same in the documentation page. Does that matter? Is this expected? 🤔
There was a problem hiding this comment.
AGH! No, thank you for bringing that to my attention!
There was a problem hiding this comment.
Oh, is it because aspect-ratio isn't supported in Safari?
There was a problem hiding this comment.
It looks like Safari doesn't support aspect-ratio (though it does in the Technology Preview so it should be rolling out soon)
I think that's fine for our pattern documentation site (though I'd be hesitant to use it on our actual site). I'm curious what others think though
There was a problem hiding this comment.
Cool, I'm fine leaving it as-is for the documentation site. 😉
…into feature/button-swap * 'v-next' of github.com:cloudfour/cloudfour.com-patterns: Update storybook monorepo to v6.3.8 Update babel monorepo Incease whitespace for the ground nav component (#1533) Responsive fallback (#1529) Use aria-labelledby to add accessible names to articles (#1530) # Conflicts: # package-lock.json
4 participants
Overview
This PR adds a new responsive fallback image in the instance that an image fails to load.
Screenshots
Testing